<template>
  <div>
    <header-title :header-title="title" />
    <introduce-dialog
      :dialog-visible="visible"
      :row="row"
      @cancel-dialog="handleCancelDialog"
      @confirm-dialog="handleConfirmDialog"
    />
    <confirm-dialog
      :dialog-visible="confirmVisible"
      @cancel-dialog="handleCancel"
      @confirm-dialog="handleConfirm"
    />
    <div style="margin-left: 15%; margin-top: 80px;">
      <el-row style="height: 40px">
        <el-col :span="3">
          公司名称：
        </el-col>
        <el-col :span="8">
          {{ IntroduceData().name }}
        </el-col>
      </el-row>
      <el-row style="height: 100%">
        <el-col :span="3">
          公司介绍：
        </el-col>
        <el-col :span="8">
          {{ IntroduceData().des }}
        </el-col>
      </el-row>
      <el-row style="height: 140px; margin-top: 25px;">
        <el-col :span="3">
          公司图片：
        </el-col>
        <el-col :span="5">
          <img
            style="width: 375px; height: 120px;"
            :src="IntroduceData().host + IntroduceData().img"
          >
        </el-col>
      </el-row>
      <el-row style="height: 150px">
        <el-col :span="3">
          在线客服二维码：
        </el-col>
        <el-col :span="8">
          <img
            style="width: 130px; height: 130px;"
            :src="IntroduceData().host + IntroduceData().qcode"
          >
        </el-col>
      </el-row>
      <el-row style="height: 40px">
        <el-col :span="3">
          公司地址：
        </el-col>
        <el-col :span="8">
          {{ IntroduceData().address }}
        </el-col>
      </el-row>
      <el-row style="height: 40px">
        <el-col :span="3">
          公司固话：
        </el-col>
        <el-col :span="8">
          {{ IntroduceData().phone }}
        </el-col>
      </el-row>
      <el-row v-if="IntroduceData().tel1" style="height: 40px">
        <el-col :span="3">
          公司电话1：
        </el-col>
        <el-col :span="8">
          {{ IntroduceData().tel1 }}
        </el-col>
      </el-row>
      <el-row v-if="IntroduceData().tel2" style="height: 40px">
        <el-col :span="3">
          公司电话2：
        </el-col>
        <el-col :span="8">
          {{ IntroduceData().tel2 }}
        </el-col>
      </el-row>
      <el-row style="height: 40px">
        <el-col :span="6" :offset="3">
          <el-button
            type="primary"
            @click="handleClick"
          >
            编辑
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import HeaderTitle from '@/components/HeaderTitle'
import IntroduceDialog from '@/components/IntroduceDialog'
import ConfirmDialog from '@/components/ConfirmDialog'
import mixin from '@/mixin/mixin'
export default {
  components: {
    HeaderTitle,
    IntroduceDialog,
    ConfirmDialog
  },
  mixins: [mixin],
  data() {
    return {
      title: '公司介绍',
      visible: false,
      confirmVisible: false,
      confirmData: {},
      row: {},
      pageData: {}
    }
  },
  mounted() {
    this.getIntroduceData({})
  },
  methods: {
    handleClick() {
      this.getIntroduceRow({}).then(() => {
        this.row = this.IntroduceRow()
      })
      const data = {}
      this.visible = true
    },
    handleCancelDialog() {
      this.visible = false
    },
    handleConfirmDialog(playload) {
      if (!playload.img) {
        this.$message.warning('请上传公司图片！')
        return false
      }
      if (!playload.qcode) {
        this.$message.warning('请上传在线客服二维码！')
        return false
      }
      this.confirmData = playload
      this.visible = false
      this.confirmVisible = true
    },
    handleCancel() {
      this.confirmVisible = false
      this.visible = true
    },
    handleConfirm() {
      this.editIntroduceData(this.confirmData).then((res) => {
        if (res.data.state === '000') {
          this.$message.success('编辑成功！')
          this.getIntroduceData({})
        } else {
          this.$message.error(res.data.msg)
        }
      })
      this.confirmVisible = false
    }
  }
}
</script>

<style>
  ul {
    list-style-type: none;
    margin-left: 15%;
  }
</style>

